<template>
  <div class="all">
    <home></home>
     <div class="search-wrapper">
        <search class="sou"></search>
      </div>
    <div class="center-all">
      <sidebar class="cebian"></sidebar>
      <carousel class="lunbo"></carousel>
      <div>
        <ul class="right">
          <li><img v-bind:src="image" alt=""></li>
          <li class="sr-2"><img v-bind:src="image1" alt=""></li>
          <li class="sr-3"><img v-bind:src="image2" alt=""></li>
        </ul>
      </div>
    </div>
    <div class="middle">
      <central></central>
    </div>
    <div class="middle-bottom">
      <div class="container">
        <div class="pic"><img src="//static06.yuanling.com/eplat/static/2020_12_29_02/img/home-recruit1.6a4d7e3.png" alt="" width="70" height="60">
          <div class="pic-right">
            <div class="title">7天无忧试用</div>
            <div class="desc">对每个服务提供7天试用，不满意<br>可以免费更换人才</div>
          </div>  
        </div>
        <div class="pic"><img src="//static06.yuanling.com/eplat/static/2020_12_29_02/img/home-recruit2.c33127d.png" alt="" width="70" height="60">
          <div class="pic-right">
            <div class="title">远程工作追踪</div>
            <div class="desc">圆领工作者在履约期间按天打卡并汇报<br>工作交付，确保工作成果可被追踪</div>
          </div>  
        </div>
        <div class="pic"><img src="//static06.yuanling.com/eplat/static/2020_12_29_02/img/home-recruit3.38a429b.png" alt="" width="70" height="60">
          <div class="pic-right">
            <div class="title">灵活支付</div>
            <div class="desc">圆领提供月结的付款方式，企业在工作<br>者服务一个周期后才会付款</div>
          </div>  
        </div>
        
      </div>
    </div>
    <div class="footer">
      <foot></foot>
    </div>
  </div>
</template>

<script>
import home from "@/components/index/home.vue";
import search from "@/components/index/search.vue";
import Sidebar from "@/components/index/sidebar.vue";
// import Carousel from '@/components/index/Carousel.vue';
import central from '@/components/index/b_central.vue';
import foot from '@/components/index/foot.vue'
import Carousel from "@/components/index/bp_carousel.vue"
export default {
  name: "Home",
  data () {
    return{
    image:'//img01.51jobcdn.com/im/mkt/zn/bjt/pic_cg_miduoduo.jpg?1572510271',
    image1:'//img01.51jobcdn.com/im/mkt/jingying/20200701/51web_banner_315x70.jpg?1594000808',
    image2:'//img01.51jobcdn.com/im/mkt/linda/51jobA05.jpg?1551062357'

    }
  },
  components: {
    home,
    search,
    Sidebar,
    Carousel,
    central,
    foot,
  },
};
</script>

<style scoped>
li{
  list-style-type: none;
}

.all {
  width: 100%;
  height: 1800px;
  background: #F2F5F4;
}

.center-all{
  width: 1200px;
  margin: 10px auto 0px;
  display: flex;
  justify-content: center;
}
.search-wrapper{
  background: #eceef2;
  padding: 10px 0 10px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center!important;
}
.cebian{
  margin:0px 20px;
}
.lunbo{
  margin:0px auto;
}
.right li{
  padding-bottom: 65px;
  margin-right: 50px;
}
.right{
  margin-left : 20px;
  display: grid;
  grid-template-columns: repeat(1,315px);
  grid-template-rows: repeat(3,80px);
  grid-row-gap: 55px;
}
.middle{
  width: 1200px;
  margin: 0px auto;
  display: flex;
  justify-content: center;
}
.middle-bottom{
  width: 100%;
  background: #F2F5F4;
  display: flex;
  justify-content: center;
  margin: 50px auto;

}
.container{
  width: 100%;
  display: flex;
  justify-content: center;
  /* margin: 0 auto; */

}
.pic{
  display: inline-block;
  display: flex;
  justify-content: space-between;
  margin: 0px 120px;
  
}
.pic-right{
  display: inline-block;
  height: 60px;
  padding-left: 10px;
}
.title{
  margin-top: 0px;
  font-size: 18px;
}
.desc{
  font-size: 14px;
  margin-top:5px ;
}
.footer{
  width: 100%;
  background: #ffffff;
  margin: 100px auto 0px;
  display: flex;
  justify-content: center;
}
</style>
